Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
jquery-validation
Advanced tools
The jquery-validation npm package is a popular plugin for the jQuery library that provides a simple way to validate forms on the client side. It offers a wide range of validation rules and customization options to ensure that user input meets the required criteria before submission.
Basic Form Validation
This feature allows you to set up basic form validation rules. In this example, the field 'fieldName' is required and must be at least 2 characters long. Custom error messages are also provided.
$(document).ready(function() {
$("#myForm").validate({
rules: {
fieldName: {
required: true,
minlength: 2
}
},
messages: {
fieldName: {
required: "This field is required",
minlength: "Your input must be at least 2 characters long"
}
}
});
});
Custom Validation Methods
This feature allows you to define custom validation methods. In this example, a custom rule 'customRule' is created to ensure that the input contains only letters.
$.validator.addMethod("customRule", function(value, element) {
return this.optional(element) || /^[a-zA-Z]+$/.test(value);
}, "Please enter only letters");
$(document).ready(function() {
$("#myForm").validate({
rules: {
fieldName: {
customRule: true
}
}
});
});
Remote Validation
This feature allows you to perform remote validation by making an AJAX request to the server. In this example, the 'username' field is validated against a server endpoint to check if the username is already taken.
$(document).ready(function() {
$("#myForm").validate({
rules: {
username: {
required: true,
remote: "/check-username"
}
},
messages: {
username: {
required: "Please enter a username",
remote: "Username is already taken"
}
}
});
});
Validate.js is a lightweight JavaScript form validation library inspired by the simplicity of jQuery's validation plugin. It provides a similar set of validation rules and customization options but does not depend on jQuery, making it suitable for projects that do not use jQuery.
Parsley is a powerful, UX-focused form validation library. It offers a wide range of built-in validators and customization options, similar to jquery-validation. Parsley also provides better support for modern JavaScript frameworks and has a more user-friendly API.
FormValidation is a comprehensive form validation library that supports a wide range of frameworks, including Bootstrap, Foundation, and others. It offers more advanced features and customization options compared to jquery-validation, making it suitable for complex form validation requirements.
The jQuery Validation Plugin provides drop-in validation for your existing forms, while making all kinds of customizations to fit your application really easy.
Prebuilt files can be downloaded from https://jqueryvalidation.org/
The unreleased development files can be obtained by:
grunt
to create the built files in the "dist" directoryInclude jQuery and the plugin on a page. Then select a form to validate and call the validate
method.
<form>
<input required>
</form>
<script src="jquery.js"></script>
<script src="jquery.validate.js"></script>
<script>
$("form").validate();
</script>
Alternatively include jQuery and the plugin via requirejs in your module.
define(["jquery", "jquery.validate"], function( $ ) {
$("form").validate();
});
For more information on how to setup a rules and customizations, check the documentation.
See the Contributing Guidelines for details.
IMPORTANT NOTE ABOUT EMAIL VALIDATION. As of version 1.12.0 this plugin is using the same regular expression that the HTML5 specification suggests for browsers to use. We will follow their lead and use the same check. If you think the specification is wrong, please report the issue to them. If you have different requirements, consider using a custom method. In case you need to adjust the built-in validation regular expression patterns, please follow the documentation.
IMPORTANT NOTE ABOUT REQUIRED METHOD. As of version 1.14.0 this plugin stops trimming white spaces from the value of the attached element. If you want to achieve the same result, you can use the normalizer
that can be used to transform the value of an element before validation. This feature was available since v1.15.0
. In other words, you can do something like this:
$("#myForm").validate({
rules: {
username: {
required: true,
// Using the normalizer to trim the value of the element
// before validating it.
//
// The value of `this` inside the `normalizer` is the corresponding
// DOMElement. In this example, `this` references the `username` element.
normalizer: function(value) {
return $.trim(value);
}
}
}
});
For an invalid field, the default output for the jQuery Validation Plugin is an error message in a <label>
element. This results in two <label>
elements pointing to a single input field using the for
attribute. While this is valid HTML, it has inconsistent support across screen readers.
For greater screen reader support in your form's validation, use the errorElement
parameter in the validate()
method. This option outputs the error in an element of your choice and automatically adds ARIA attributes to the HTML that help with screen reader support.
aria-describedby
is added to the input field and it is programmatically tied to the error element chosen in the errorElement
parameter.
$("#myform").validate({
errorElement: "span"
});
<label for="name">Name</label>
<input id="name" aria-describedby="unique-id-here">
<span class="error" id="unique-id-here">This field is required</span>
Copyright © Jörn Zaefferer
Licensed under the MIT license.
FAQs
Client-side form validation made easy
We found that jquery-validation demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.